/**
 * Created by Diego on 16/1/11. 
 * 修改了单选piece在点击地图的方式,改为默认当前碎片的第一个,点击地图成功后原来第一个碎片移除,新增piece有无判断.修改地图长宽错误.修改几处样式(虽然还是很丑)
 * 取消map.js和piece.js,通过转换json(html中的mod)来得到map和piece,新增toArrMap函数
 * js加jq这样的写法也是醉了。。  16/1/17
 * 新增碎片框,经过map的时候就显示piece大小的透明度为0.2的框
 * 补上所有关  16/10/20
 */

var w=h=40;

var num0=document.getElementById("num0");
var num1=document.getElementById("num1");
var num2=document.getElementById("num2");
var num3=document.getElementById("num3");
var num4=document.getElementById("num4");
var canvas=document.getElementById("canvas");
var piece=document.getElementById("piece");
//var level=parseInt(document.getElementById("level").getAttribute("value"));
var context = canvas.getContext('2d');
var curMap;//当前地图数据数组，初始与curLevel相同，游戏中改变
var curPiece;
var curLevel;//当前级地图数据，游戏中不变，用来判断游戏是否结束
var iCurLevel;
var modu;
var pos={};
var flag=true;
var pieceIndex=0;//点击次数

function init(){
    initLevel();

}
//关卡初始化
function initLevel()
{
    iCurLevel = parseInt(document.getElementById('level').getAttribute("value"));
    modu=mod[iCurLevel].modu;//当前关层级
    //console.log(modu);
    curMap=toArrMap(mod[iCurLevel].map);//当前关地图
    //console.log(curMap);
    curLevel=toArrMap(mod[iCurLevel].map);
    canvas.setAttribute("width",(curLevel[0].length)*(w));//这里的宽高原来是反的原来是w:curLevel.length
    canvas.setAttribute("height",(curLevel.length)*(h));
    DrawMap(curMap,context);
    curPiece= toArr(mod[iCurLevel].pieces);//当前关碎片处理
    DrawPieceMap(curPiece);
    $(".piece-item").first().addClass("bor-red");
}

//初始化piece,防止进入前后关只增
function initPiece(){
    //var remove=document.getElementsByClassName("piece-item");
    //for(;remove.length>0;){
    //    piece.removeChild(piece.lastChild);
    //    //打代码快点么??没感觉出来的咯
    //}
    $(".piece-item").remove();
}
//初始化地图
function DrawMap(level,con){

    var pic;
    for(var i=0;i<level.length;i++)//y轴
    {
        for(var j=0;j<level[i].length;j++)//x轴
        {
            var num=level[i][j];
            switch (num){
                case 0:
                    pic=num0;
                    break;
                case 1:
                    pic=num1;
                    break;
                case 2:
                    pic=num2;
                    break;
                case 3:
                    pic=num3;
                    break;
                case 4:
                    pic=num4;
                    break;
            }
            con.fillStyle="#fff";
            con.fillRect(w*j,h*i+1,pic.width,pic.height);//重新画个矩形把原来的覆盖了,不然新的会在原有的上面叠加
            con.drawImage(pic,w*j,h*(i)+1,pic.width,pic.height);//(图片，x,y,width,height)
        }
    }
}

//piece字符串转成数字表示的数组
function toArr(level){

    //console.log(level);
    var arr=[];

    //创建多维数组
    for(var i=0;i<level.length;i++){
        arr[i]=[];

        var _arr=level[i].split(",").length;
        //console.log(_arr);
        for(var j=0;j<_arr;j++){
            arr[i][j]=[];
        }
    }
    //把piece转化为数组
    for(var i=0;i<level.length;i++)
    {
        var x=0;
        var y=0;
        for(var j=0;j<level[i].length;j++){
            //console.log("x1:"+x);
            //console.log(arr[i][x]);
            //console.log("y1:"+y);

            //有逗号的时候,数组成员要多一个
            if(level[i][j]=="X"){arr[i][x][y]=1;y++;}
            else if(level[i][j]=="."){arr[i][x][y]=0;y++;}
            else if(level[i][j]==","){
                x++;
                y=0;

            }
            //console.log(arr[i][x][y-1]);
            //console.log("y2:"+y);
        }
    }
    return arr;
}
//var map=mod.map;
//var x=toArrMap(map);
//console.log(x);

//把mod.map转化成数组
function toArrMap(map){

    var mapArr=new Array();  //一维数组mod.map
    for(var i=0;i<map.length;i++){ //二维数组mod.map[i]
        mapArr[i]=new Array();
        for(var j=0;j<map[i].length;j++){
            mapArr[i][j]=new Array();//三维数组mod.map[i][j]
            mapArr[i][j]=parseInt(map[i][j]);
        }
    }
    //for(var i=0;i<map.length;i++){
    //    for(var j=0;j<map[i].length;j++){
    //      mapArr[i][j]=parseInt(map[i][j]);
    //    }
    //}
    return mapArr;
}

//把piece转化成图片
function DrawPieceMap(level){
    for(var i=0;i<level.length;i++){
        //console.log(level[i]);
        //动态创建piece图片
        for(var j=0;j<level[i].length;j++){
            var pcanvas=document.createElement("canvas");
            var pcontext=pcanvas.getContext('2d');
            pcanvas.setAttribute("width",(level[i][j].length)*(w+1));//这里的宽高原来写反了.已改正
            pcanvas.setAttribute("height",(level[i].length)*(h+1));
        }
        //绘制piece
        DrawMap(level[i],pcontext);
        //动态生成piece前面的单选按钮和它的父元素,最后统一放到id=piece的容器中(好多piece真乱...)
        var div=document.createElement("div");
        div.setAttribute("class","piece-item");
        var span=document.createElement("span");//原先的单选改成默认第一个,后面取消单选判断
        span.innerHTML=i+" :";
        span.setAttribute("data",i);
        span.setAttribute("datay",level[i].length);
        span.setAttribute("datax",level[i][0].length);
        div.appendChild(span);
        div.appendChild(pcanvas);
        piece.appendChild(div);
    }
}

//添加事件响应
canvas.addEventListener('click', function(e){
    if(flag){
        var p = getEventPosition(e);
        showPos(p);
        if($(".bor-red").length == 0){
            if(!CheckFinish()){
                alert("没碎片了,重新来过把~");
                NextLevel(0);
            }
        }
        tip(p);
    }
}, false);

canvas.addEventListener("mousemove",function(e){
    var t=getEventPosition(e);
    DrawMap(curMap,context);
    tip(t);

});

//得到点击的坐标
function getEventPosition(ev){
    var x, y;
    if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    }else if (ev.offsetX || ev.offsetX == 0) { // Opera
        x = ev.offsetX;
        y = ev.offsetY;
    }
    return {x: x, y: y};
}

//选中的piece覆盖到地图上
function showPos(p){

    for(var j =0;j<curLevel.length;j++)
    {
        for(var i=0;i<curLevel[0].length;i++)
        {
            if(w*i<p.x && w*(i+1)>p.x && h*j<p.y &&h*(j+1)>p.y)//获得地图点击位置的坐标
            {
                //console.log(i+" "+j);
                var x=curLevel[0].length-i;//距边界的距离
                var y=curLevel.length-j;
                var _i=i;
                var _j=j;//嗯..这是piece上个部分的坐标..当初是怎么想的
                //console.log(x+" "+y);
                change(x,y,_i,_j);

            }
        }
    }

}

//caodan hanshu start..
function change(x,y,ci,cj){
    var piecex=$(".piece-item").first().children("span").attr("datax");
    var piecey=$(".piece-item").first().children("span").attr("datay");
    var index=$(".piece-item").first().children("span").attr("data");
    // console.log(piecex+"  piecex");
    // console.log(piecey+"  piecey");

    //先判断是否有碎片
    if($(".piece-item").length<1)
    {
        alert("诶诶,碎片没了!");
        return;
    }
    else{
        //判断是否超出边界
        if(x>=piecex && y>=piecey)
        {

            //console.log(curPiece[index].length);
            //curMap[ci][cj]=1;
            for(var i=0;i<curPiece[index].length;i++){
                for(var j=0;j<curPiece[index][i].length;j++){
                    var val=curPiece[index][i][j];
                    //console.log(i+"  i");
                    //console.log(j+"  j");
                    //console.log(val+"  val");
                    var _ci=ci;
                    var _cj=cj;
                    //console.log(_ci+"  _ci");
                    //console.log(_cj+"  _cj");
                    changeMap(i,j,_ci,_cj,val);
                }
            }
            DrawMap(curMap,context);
            $(".piece-item").first().remove();
            $(".piece-item").first().addClass("bor-red");

            if(CheckFinish()){
                // alert("过关了!恭喜!")
                NextLevel(1);
            }
        }
        else{
            alert("碎片在这个位置的话会超出边界了呢亲~");
        }
    }
}

//点击地图之后,遍历piece转化成数组之后里面的值,传到这里去修改地图的值,这函数越改越多了= =!
function changeMap(ti,tj,tti,ttj,value){//参数分别对应,piece对应的数组下标,当前地图点击的坐标和当前piece对应的值（增加阅读体验）
    curMap[ttj+ti][tti+tj]=(curMap[ttj+ti][tti+tj]+value)%modu;
    //console.log(CheckFinish());
}

//点击地图后出现提示piece在地图中的位置
function tip(t){
    pieceIndex =$(".bor-red span").attr("data");//当前是第几个碎片
    if(pieceIndex>mod[iCurLevel].pieces.length)
    {return;}
    var wlen   = curPiece[pieceIndex][0].length;
    var hlen   = curPiece[pieceIndex].length;
    var width  = wlen > 1 ? wlen - 1 : 0.5;
    var height = hlen > 1 ? hlen - 1 : 0.5;

    context.strokeStyle="rgb(255,0,0)";
    context.lineWidth=4;
    context.strokeRect(t.x, t.y,width*w,height*h);
    context.fillStyle="rgba(255,255,255,0.5)";
    context.fillRect(t.x, t.y,width*w, height*h);
}

//判断是否完成本关
function CheckFinish()
{
    for(var i=0;i<curMap.length;i++)//y轴
    {
        for(var j=0;j<curMap[i].length;j++)//x轴
        {
            if(curMap[i][j]!=0)
            {
                return false;
            }
        }
    }
    return true;
}

function NextLevel(i)
{

    var level=mod[iCurLevel].level-1;
    pieceIndex=0;
    flag=true;
    level=level+i;
    if(level<0)
    {
        iCurLevel=0;
        return;
    }
    var len=level.length;
    if(level>len-1)
    {
        iCurLevel=len-1;
        return;
    }
    document.getElementById("level").setAttribute("value",level);
    document.getElementById("nowLevel").innerHTML=level+1;
    document.getElementById("mod").innerHTML= mod[iCurLevel].modu;
    initPiece();
    initLevel();

}

//克隆二维数组
function copyArray(arr)
{
    var b=[];
    for(var i=0;i<arr.length;i++)
    {
        b[i]=arr[i].concat();
    }
    return b;
}
window.onload=init;
